<div class="root-container">
  <div class="row" style="height:40px;">
    <span class="plane-title" [ngStyle]="{color:connStatus?'#4384A6':'#f00'}">{{projectSelectedDesc}}设备状态看板</span>
    <!-- <span class="timestamp">{{timeNow}}</span> -->
  </div>
  <div style="display:flex;width:100%;" *ngIf="isCSS1; else notflag">
    <div style="width:33%;">
      <div class="data-container">
        <span class="title-container">箱体</span>
        <section style="flex-grow: 1;">

          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目       标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production">

              <span class="label-tag"
                style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                {{i.jph}}</span><br /><br />
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                  style="text-align: center;">{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:34%;">
      <div class="data-container">
        <span class="title-container">装配</span>
        <section style="flex-grow: 1;">

          <span class="product-tag">
            <span>目       标: </span><br /><br />
            <span>实际(上/下):</span>
          </span>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production3">
                <span class="label-tag"
                  style="font-size: 15px;width: 70px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:33%;">
      <div class="data-container">
        <span class="title-container">曲轴</span>
        <section style="flex-grow: 1;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目       标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production2">
              <span class="label-tag"
                style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                {{i.jph}}</span><br /><br />
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                  style="text-align: center;">{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div style="display:flex;width:100%;" *ngIf="isGF9; else notflag">
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">装配</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production">

                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">机加工</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <!-- <span class="product-tag">
            <span>目      标: </span><br /><br />
            <span>实际(上/下):</span>
          </span> -->
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production3">
                <span class="label-tag"
                  style="font-size: 15px;width: 70px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                <!-- <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                <span class="deviceAlarmNo-col"style="margin-left:20px;">{{i.deviceAlarmNo}}</span> -->
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>


  </div>
  <div style="display:flex;width:100%;" *ngIf="isCSS5; else notflag">
    <div style="width:33%;">
      <div class="data-container">
        <span class="title-container">箱体</span>
        <section style="flex-grow: 1;">

          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目       标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production">

              <span class="label-tag"
                style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                {{i.jph}}</span><br /><br />
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                  style="text-align: center;">{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:34%;">
      <div class="data-container">
        <span class="title-container">装配</span>
        <section style="flex-grow: 1;">

          <span class="product-tag">
            <span>目       标: </span><br /><br />
            <span>实际(上/下):</span>
          </span>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production3">
                <span class="label-tag"
                  style="font-size: 15px;width: 70px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:33%;">
      <div class="data-container">
        <span class="title-container">曲轴</span>
        <section style="flex-grow: 1;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目       标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production2">
              <span class="label-tag"
                style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                {{i.jph}}</span><br /><br />
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                  style="text-align: center;">{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>2">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col" style="margin-left:20px;">{{i.shfitDay}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div style="display:flex;width:100%;" *ngIf="isBEV3; else notflag">
    <div style="width:100%;">
      <div class="data-container">
        <span class="title-container">PACK</span>
        <section style="flex-grow: 1;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目       标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <div class="product-row" style="display: inline;">
            <span class="product-tag" *ngFor="let i of production">

              <span class="label-tag"
                style="font-size: 15px;width: 100px; color: white;text-align: center;">{{i.subArea}}
                {{i.jph}}</span><br /><br />
              <span style="text-align: center;display: block;">
                <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                  style="text-align: center;">{{i.unhours}}</span>/
                <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
              </span>
            </span>
          </div>
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div style="display:flex;width:100%;" *ngIf="isGFE2; else notflag">
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">装配</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production">

                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">机加工</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <span class="product-tag">
            <span>目      标: </span><br /><br />
            <span>实际(上/下):</span>
          </span>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production3">
                <span class="label-tag"
                  style="font-size: 15px;width: 70px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div style="display:flex;width:100%;" *ngIf="isHEV2; else notflag">
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">STK</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production">

                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">PML</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <span class="product-tag">
            <span>目      标: </span><br /><br />
            <span>实际(上/下):</span>
          </span>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production3">
                <span class="label-tag"
                  style="font-size: 15px;width: 70px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow3.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>

        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory3.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory3">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory3">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <!-- UBEV -->
  <div style="display:flex;width:100%;" *ngIf="isUBEV; else notflag">
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">ST1</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production">

                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">PK1</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production2">
                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <!-- PHEV -->
  <div style="display:flex;width:100%;" *ngIf="isPHEV; else notflag">
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">CB1</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production">

                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div style="width:50%;">
      <div class="data-container">
        <span class="title-container">PK1</span>
        <section style="flex-grow: 1;white-space: nowrap;">
          <div class="product-row" style="display: inline;">
            <span class="product-tag">
              <span>目      标: </span><br /><br />
              <span>实际(上/下):</span>
            </span>
          </div>
          <!-- <marquee behavior="scroll" direction=left style="float: right;" scrollamount="3" width='80%'> -->
            <div class="product-row" style="display: inline;">
              <span class="product-tag" *ngFor="let i of production2">
                <span class="label-tag"
                  style="font-size: 15px;width: 80px; color: white;text-align: center;">{{i.subArea}}
                  {{i.jph}}</span><br /><br />
                <span style="text-align: center;display: block;">
                  <span [ngStyle]="{color:i.unhours>=i.jph?'#0f0':'#f00'}"
                    style="text-align: center;">{{i.unhours}}</span>/
                  <span [ngStyle]="{color:i.hours>=i.jph?'#0f0':'#f00'}" style="text-align: center;">{{i.hours}}</span>
                </span>
              </span>
            </div>
          <!-- </marquee> -->
        </section>
        <section style="flex-grow: 3;height: 220px;">
          <span class="label-tag">实时设备报警</span>
          <div [ngSwitch]="listNow2.length>6">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="180" scrollamount="1">
                <div class="data-row" *ngFor="let i of listNow2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.code}}</span>
                  <span class="message-col">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listNow2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.code}}</span>
                <span class="message-col">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
        <section style="flex-grow: 2;height: 300px;">
          <span class="label-tag">历史设备报警</span>
          <div [ngSwitch]="listHistory2.length>4">
            <div *ngSwitchCase="true">
              <marquee behavior="scroll" direction=down height="270" scrollamount="1">
                <div class="data-row" *ngFor="let i of listHistory2">
                  <span class="station-col">{{i.subArea}}</span>
                  <span class="station-col">{{i.station}}</span>
                  <span class="alarm-duration-col">{{i.duration}}</span>
                  <span class="station-col">{{i.shfitDay}}</span>
                  <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                  <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
                </div>
              </marquee>
            </div>
            <div *ngSwitchCase="false">
              <div class="data-row" *ngFor="let i of listHistory2">
                <span class="station-col">{{i.subArea}}</span>
                <span class="station-col">{{i.station}}</span>
                <span class="alarm-duration-col">{{i.duration}}</span>
                <span class="station-col">{{i.shfitDay}}</span>
                <span class="station-col">{{i.deviceAlarmNo}}</span><br />
                <span class="station-col" style="margin-left:20px;">{{i.faultWordDescription}}</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="msg-container">
    <marquee behavior="scroll" direction=left>
      <strong>
        <span *ngFor="let i of alarmMessage" style="margin-left: 10px;">{{i}}</span>
      </strong>
    </marquee>
  </div>
</div>